<main-layout [sliderWidth]="sliderWidth" (toggle)="this.toggleCollapsed($event)" [minHeight]="'630px'">
  <main-content>
    <div class="product-operate clearfix">
      <div nz-col [nzSm]="12">
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="goAddPage()">
          <i class="anticon anticon-plus"></i><span>新建店铺</span>
        </button>
        <button nz-button [nzType]="'default'" [nzSize]="'large'" *ngIf="checkedIds.length"
                (click)="deleteCheckedGroup()">
          <i class="anticon anticon-delete"></i><span>批量删除</span>
        </button>
      </div>
    </div>

    <div class="product-list-out mt-16">
      <div class="checked-line" *ngIf="!!checkedIds.length">
        <i class="anticon anticon-info-circle"></i> 已选择 <span>{{checkedIds.length}}</span> 项
        <a href="javascript:;" (click)="checkedIds=[];_indeterminate=false;_checkAll(false);">清空</a>
      </div>
      <nz-table [(nzLoading)]="loading"
                [nzCustomNoResult]="true"
                [(nzPageSize)]="pageSize"
                [(nzPageIndex)]="page"
                [(nzTotal)]="total"
                (nzPageIndexChange)="getCaseDetailList()"
                [nzAjaxData]="showcaseDetailList">
        <thead nz-thead>
        <tr>
          <th nz-th [nzCheckbox]="true">
            <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate"
                   (ngModelChange)="_checkAll($event)">
            </label>
          </th>
          <th nz-th>店铺简称</th>
          <th nz-th>业务范围</th>
          <th nz-th>店铺地址</th>
          <th nz-th>
            <span>店铺商品数</span>
          </th>
          <th nz-th>操作</th>
        </tr>
        </thead>
        <tbody nz-tbody *ngIf="showcaseDetailList.length>0">
        <ng-container *ngFor="let item of showcaseDetailList">
          <tr nz-tbody-tr>
            <td nz-td [nzCheckbox]="true">
              <label nz-checkbox [(ngModel)]="item.checked" (ngModelChange)="checkedSingele($event, item.id)">
              </label>
            </td>
            <td>{{ item.name }}</td>
            <td>
              <span *ngIf="item.send_type == 0">不限</span>
              <span *ngIf="item.send_type == 1">自提</span>
              <span *ngIf="item.send_type == 2">外卖</span>
            </td>
            <td >{{item.address}}</td>
            <td>{{ item.goods_count }}</td>
            <td>
              <a href="javascript:;" (click)="editPage(item)">编辑</a>
              <span nz-table-divider class="span-divider"></span>
              <a href="javascript:;" (click)="detailDel($event,item)">移除</a>
            </td>
          </tr>
        </ng-container>
        </tbody>
        <div noResult>
          <div class="text-center" style="margin-top:132px;margin-bottom:100px;">
            <i class="empty-icon"></i>
            <p>目前并无任何连锁店</p>
            <p>请添加连锁店</p>
          </div>
        </div>
      </nz-table>
    </div>
  </main-content>
</main-layout>
